<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入ElementUI样式 -->
    <link rel="stylesheet" href="../js/index.css">
    <link rel="stylesheet" >
    <script src="../js/vue.js"></script>
    <!-- 引入ElementUI组件库 -->
    <script src="../js/index.js"></script>
</head>
<body>
    <div id="app">


        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="密码" prop="pass">
                <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPass">
                <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="年龄" prop="age">
                <el-input v-model.number="ruleForm.age"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>



        <script>
         var app=   new Vue({
                el:'#app',
                data(){// 自定义规则必须 使用 data() 这种方式,否则 Vue 无法识别
                    return {
                        ruleForm: {
                            pass: '',
                            checkPass: '',
                            age: ''
                        },
                        //定义校验规则
                        rules: {
                            pass: [
                                {validator: this.validatePass, trigger: 'blur'}
                            ],
                            checkPass: [
                                {validator: this.validatePass2, trigger: 'blur'}
                            ],
                            age: [
                                {validator: this.checkAge, trigger: 'blur'}
                            ]
                        }
                    }

                },
                methods:{
                    submitForm(formName) {
                        this.$refs[formName].validate((valid) => {
                            if (valid) {
                                alert('submit!');
                            } else {
                                console.log('error submit!!');
                                return false;
                            }
                        });
                    },
                    resetForm(formName) {
                        this.$refs[formName].resetFields();
                    },
                    validatePass(rule, value, callback) {
                        if (value === '') {
                            callback(new Error('请输入密码'));
                        } else {
                            if (this.ruleForm.checkPass !== '') {
                                this.$refs.ruleForm.validateField('checkPass');
                            }
                            callback();
                        }
                    },
                    validatePass2(rule, value, callback){
                        if (value === '') {
                            callback(new Error('请再次输入密码'));
                        } else if (value !== this.ruleForm.pass) {
                            callback(new Error('两次输入密码不一致!'));
                        } else {
                            callback();
                        }
                    },

                    checkAge(rule, value, callback){
                        if (!value) {
                            return callback(new Error('年龄不能为空'));
                        }
                        setTimeout(() => {
                            if (!Number.isInteger(value)) {
                                callback(new Error('请输入数字值'));
                            } else {
                                if (value < 18) {
                                    callback(new Error('必须年满18岁'));
                                } else {
                                    callback();
                                }
                            }
                        }, 1000);

                    },


                }

            });
        </script>
    </div>
</body>
</html>